<template>
    <div class="allc-root">
        <span class="close-allc" @click="closeAllc">×</span>
        <p class="location">GPS定位失败，请点击重试</p>
        <p class="overseas-switch">
            <span :class="{active:isSwitch=='inner'}" @touchstart="switchClick($event,1)">国内</span>
            <span :class="{active:isSwitch=='outer'}" @touchstart="switchClick($event,2)">海外</span>
        </p>
        <p class="overseas-switch" style="font-size:13px">
            {{isSwitch=='inner'?'国内热门城市':'海外热门目的地'}}
        </p>
        <ul class="hot">
            <li>
                <span class="hot-tag" v-for="h in hotList" @touchstart.self="selectCity(h)">{{h}}</span>
            </li>    
        </ul>
        <p class="overseas-switch" style="font-size:13px">
            {{isSwitch=='inner'?'全部城市':'全部地区'}}
        </p>
        <ul class="hot">
            <li class="allcity-li" v-for="a in allList">
                <p class="all-tag" @touchstart.self="selectCity(a.name)">{{a.name}}</p>
            </li>    
        </ul>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    data:function(){
        return {
            isSwitch:"inner",
            hotList:'',
            allList:'',
        }
    },
    computed:{
        ...mapState([
            'Cities',
            
        ])
    },
    mounted:function(){
        var params = {
            city_name:"全部城市",
            with_citydata:'true',
            width_sortdata:'false'
        }
        this.$store.dispatch("requestCities",params)
        .then(res=>{
            this.$store.commit("setCities",res.data.city_data);
            this.hotList = this.Cities.domestic_city.hot_city_list;
            this.allList = this.Cities.domestic_city.all_city_list;
        });
    },
    methods:{
        closeAllc:function(){
            this.$store.commit("setShowAllc",false);
            this.$store.commit("setIsFixed",false);
            setTimeout(()=> {
                this.$store.commit("setChangepointer",false);
            }, 600);
        },
        switchClick:function(e,n){
            if(n==1){
                this.isSwitch = "inner";
                this.hotList = this.Cities.domestic_city.hot_city_list;
                this.allList = this.Cities.domestic_city.all_city_list;
            }
            if(n==2){
                this.isSwitch = "outer";
                this.hotList = this.Cities.oversea_city.hot_city_list;
                this.allList = this.Cities.oversea_city.all_city_list;
            }
        },
        selectCity:function(c){
            this.$store.commit("setCurrCity",c);
            this.$store.commit("setShowAllc",false);
            this.$store.commit("setIsLoading",true);
              setTimeout(()=> {
                this.$store.commit("setChangepointer",false);
            }, 600);
            this.$store.commit("setIsFixed",false);
            var params = {
                city_name: c
            }
            this.$store.dispatch("requestHhomedata", params)
                .then(res => {
                    var arr = res.data.data.elements;
                     arr.forEach(function(e) {
                        e.items.forEach(i=>{
                            if(i.score==null){
                                i.score = 0;
                            }else{
                                i.score = Math.floor(i.score);
                            }
                        })
                    }, this);
                    this.$store.commit("setHhomedata",arr);
                    this.$store.commit("setIsLoading",false);
                });
          
        }
    }
}
</script>

<style scoped>
.allc-root{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(45deg,rgba(86,203,216,.9),rgba(122,209,153,.9)),#fff;
    z-index: 10;
    position: fixed;
    overflow:scroll;
    top: 0;
    left: 0;
    color: #fff;
}
.close-allc{
    position: absolute;
    top: 12px;
    right: 18px;
    width: 15px;
    height: 15px;
    color: #fff;
    font-size: 26px;
    text-align: center;
    line-height: 24px;
    font-weight: 100;
}
.location{
    margin: 0 20px;
    padding-top: 49px;
    font-size: 15px;
    line-height: 15px;
}
.overseas-switch{
    margin: 32px 20px 0;
    font-size: 1rem;
    line-height: 1.375;
}
.overseas-switch span{
    display: inline-block;
    padding: 9px 15px;
    border-radius: 22px;
}
.overseas-switch span.active{
    background-color: #fff;
    color: #4abdcc;
}
.overseas-switch span:nth-of-type(1){
    margin-right: 4px;
}
.hot{
    margin: 0;
    padding: 0;
    font-weight: 100;
}
li{
    list-style: none;
    padding: 5px 20px 0;
}
.hot-tag{
    margin: 16px 22px 0 0;
    display: inline-block;
    border-radius: 36px;
    position: relative;
    padding: 8px 20px;
    font-size: 14px;
    border: 1px solid #bae9e0;
}
.all-tag{
    padding: 16px 0;
    margin: 0;
    border-bottom: 1px solid #97ded3;
}
.allcity-li{
    font-size: 15px;
}
</style>